<template>
	<view class="chart_box">
		<view class="chart_container">
			<view class="top">
				<view class="head">
					<image class="w-70rpx" src="@/static/ring/chart/heart.png" mode="widthFix"></image>
					<text class="title">心率</text>
				</view>
				<view class="value">
					<text>{{ heartValue }}</text>
					<text class="unit">/min</text>
				</view>
			</view>

			<view class="chart">
				<l-echart ref="chartRef"></l-echart>
			</view>

			<view v-if="timeData.length == 2" class="chart_axis">
				<text>{{ timeData[0] }}</text>
				<text>{{ timeData[1] }}</text>
			</view>

			<view class="down">
				<view class="sub_value">
					<image class="w-30rpx" src="@/static/ring/chart/hrv.png" mode="widthFix"></image>
					<text class="title">HRV：</text>
					<text class="value">{{ hrvValue }}</text>
				</view>

				<button class="measure" @click="handleClick">
					<image class="w-40rpx" src="@/static/ring/chart/pulse.png" mode="widthFix"></image>
					<text class="text_gradient">测量</text>
				</button>
			</view>
		</view>
	</view>
</template>
<script>
import * as echarts from "echarts";
import dayjs from "dayjs";
import store from "@/store/index.js";
import { queryMyHrvInfoByDay, queryMyHeartInfoByDay } from "@/api/ring/chart.js";
import { removeTrailingZeros } from "@/js_sdk/utils/utils.js";
import { BLUETOOTH_STATUS } from "@/store/BluetoothManager.js";

export default {
	props: {
		date: String,
	},

	data() {
		return {
			values: [],
			heartValue: "-",
			hrvValue: "-",
			timeData: [],
			chartRef: null,
			chart: null,
		};
	},
	computed: {
		isLogin() {
			return store.state.userToken;
		},

		heartRate() {
			return store.state.ringDataManage.heartRate;
		},

		option() {
			return {
				color: ["#E5404F"],
				grid: {
					left: "0",
					right: "0",
					top: "0",
					bottom: "2",
					containLabel: false,
				},
				xAxis: [
					{
						show: false,
						type: "category",
						boundaryGap: false,
					},
				],
				yAxis: [
					{
						show: false,
						type: "value",
					},
				],
				series: [
					{
						name: "心率",
						type: "line",
						smooth: false,
						lineStyle: {
							width: 1.5,
							color: "#E5404F",
						},
						showSymbol: true,
						symbolSize: 1.5,
						symbol: "circle",
						itemStyle: {
							color: "#BF3541",
						},
						areaStyle: {
							opacity: 1,
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: "#BF3541",
								},
								{
									offset: 1,
									color: "rgba(191, 53, 65, 0)",
								},
							]),
						},
						data: this.values,
					},
				],
			};
		},
	},

	watch: {
		date() {
			this.updateChartData(this.date);
		},

		heartRate(nv) {
			const { heartRate, hrv } = nv || {};
			if (heartRate) {
				this.heartValue = heartRate;
			}

			if (this.hrv) {
				this.hrvValue = hrv;
			}
		},
	},

	async mounted() {
		if (this.$refs.chartRef && this.$refs.chartRef.init) {
			this.chartRef = this.$refs.chartRef;
			this.chart = await this.chartRef.init(echarts);
		}

		this.chart.setOption(this.option);
	},

	methods: {
		getTitle() {
			return 'heart';
		},
		handleClick() {
			this.$emit("onDetection", "heartRate");
		},

		updateChartData(date) {
			if (!this.isLogin) return;

			const data = {
				dateStr: dayjs(date || this.date).format("YYYY-MM-DD"),
				offsetMinutes: new Date().getTimezoneOffset(),
			};

			queryMyHeartInfoByDay(data)
				.then(async (res) => {
				console.log("queryMyHeartInfoByDay", res.data);

					const heartData = res.data;
					this.heartValue = heartData?.average ? Math.round(heartData.average) : "-";
					let data = removeTrailingZeros(heartData?.rates || []);
					this.values = data.map(({ value }) => {
						return value || null;
					});

					if (data.length) {
						this.timeData[0] = "0:00";
						this.timeData[1] = +data[data.length - 1].time + ":00";
					} else {
						this.timeData = [];
					}

					if (!this.chartRef) {
						this.chartRef = this.$refs.chartRef;
					}

					if (!this.chart) {
						this.chart = await this.chartRef.init(echarts);
					} else {
						this.chart.clear();
					}

					setTimeout(() => {
						this.chart.setOption(this.option);
					}, 100);
				})
				.catch((error) => {
					console.log("error", error);
				});
			queryMyHrvInfoByDay(data).then((res) => {
				const average = res.data.average;
				this.hrvValue = average ? Math.round(average) : "-";
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.chart_box {
	width: 100%;
	height: 400rpx;
	color: rgba(0, 0, 0, 1);

	.w-70rpx {
		width: 70rpx;
	}

	.w-40rpx {
		width: 40rpx;
	}

	.w-30rpx {
		width: 30rpx;
	}

	.chart_container {
		width: 100%;
		height: 100%;
		padding: 20rpx 30rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 22rpx;
		}

		.down {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
		}

		.head {
			// width: 100%;
			height: 70rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.title {
				font-size: 32rpx;
				font-weight: 600;
				text-align: left;
				margin-left: 12rpx;
			}
		}

		.value {
			color: rgba(255, 101, 101, 1);

			text {
				font-size: 48rpx;
				font-weight: 600;
				line-height: 68rpx;
				text-align: left;

				&.unit {
					font-size: 32rpx;
					line-height: 44rpx;
					margin-left: 8rpx;
				}
			}
		}

		.chart {
			width: 100%;
			height: 160rpx;
		}

		.chart_axis {
			width: 100%;
			height: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: rgba(0, 0, 0, 0.5);
			font-size: 20rpx;
			font-weight: 300;
		}

		.sub_value {
			// width: 100%;
			height: 44rpx;
			// margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-weight: 600;
			color: black;

			.title {
				margin-left: 12rpx;
			}

			.value {
				font-size: 32rpx;
				line-height: 44rpx;
				text-align: left;
				margin-left: 30rpx;
				color: black;
			}
		}
	}

	.measure {
		width: 240rpx;
		height: 60rpx;
		border-radius: 30rpx;

		line-height: 60rpx;
		text-align: center;

		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(180deg, rgba(45, 153, 255, 0.5) 0%, #2d99ff 100%);
		border: none;
		margin: unset;

		text {
			font-size: 32rpx;
			font-weight: 400;
		}
	}

	.text_gradient {
		color: white;
	}
}
</style>
